<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>区域管理</title>
  <link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./assets/iconfont/iconfont.css" />
  <link rel="stylesheet" href="./assets/css/common.css" />
  <link rel="stylesheet" href="./assets/css/index.css" />
  <link rel="stylesheet" href="./assets/css/area.css" />
</head>

<body>
  <div class="viewport">
    <div class="leftside">
      <a href="index.html" class="logo">
        <img src="./assets/images/logo2.png" alt="logo" />
      </a>
      <ul class="nav">
        <li class="nav-item ">
          <a href="javascript:;">
            <span class="iconfont icon-shujukanban"></span>
            <a style="display: inline;" href="./index.html">图表概览</a>
          </a>
        </li>
        <li class="nav-item active">
          <a href="javascript:;">
            <span class="iconfont icon-shujukanban"></span>
            <a style="display: inline;" href="javascript:;">区域管理</a>
          </a>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="top">
        <div class="user">
          <img class="avatar" src="./assets/images/avatar.png" alt="" />
          <span>Tom Cruise</span>
        </div>
        <div class="logout">
          <a href="javascript:;">
            <span class="iconfont icon-tuichu"></span>
            退出
          </a>
        </div>
      </div>
      <div class="content">
        <div class="card border-light" style="padding: 20px;">
          <div class="card-title">
            <!-- 添加学生信息按钮 -->
            <button type="button" class="btn btn-primary btn-sm modal-dialog-centered" data-bs-toggle="modal"
              data-bs-target="#addModal">
              添加区域
            </button>
          </div>

          <!-- table-striped隔行换色 -->
          <table class="table table-striped">
            <colgroup>
              <col width="10%" />
              <col width="20%" />
              <col width="10%" />
              <col width="10%" />
              <col width="10%" />
              <col width="28%" />
              <col width="12%" />

            </colgroup>
            <thead>
              <tr>
                <th scope="col">序号</th> 序号
                <th scope="col">区域名称</th>
                <th scope="col">车位数（个）</th>
                <th scope="col">面积（㎡）</th>
                <th scope="col">计费规则</th>
                <th scope="col">备注</th>
                <th scope="col">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">10</th>
                <td>张三</td>
                <td>20</td>
                <td>女</td>
                <td>1</td>
                <td>13261266666</td>
                <td>
                  <button type="button" class="btn btn-primary btn-sm">修改</button>
                  <button type="button" class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  </div>

  <!-- toast -->
  <div class=" toast bg-rgba my-toast" data-bs-delay="1500" aria-live="assertive" aria-atomic="true" role="alert">
    <div class="toast-body">提示消息</div>
  </div>
  <!-- 添加区域 弹窗内容部分 start -->
  <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addModalLabel">添加区域</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="" class="container add-form" autocomplete="off">
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">区域名称</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="areaName" placeholder="请输入区域名称" />
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">车位数（个）</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="spaceNumber" placeholder="请输入车位个数" />
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">面积</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="areaProportion" placeholder="请输入面积" />
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">关联计费规则</label>
              <div class="col-sm-10">
                <select class="form-select form-select-sm" name="ruleId">
                  <option value="">请选择</option>
                </select>
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">备注</label>
              <div class="col-sm-10">
                <textarea name="remark" cols="30" rows="10" class="form-control form-control-sm" name="remark"
                  placeholder="请输入备注"></textarea>
              </div>
            </div>

            <div class="row mb-3">
              <div class="col-sm-2"></div>
              <div class="col-sm-10">
                <button type="submit" class="btn btn-primary btn-sm">
                  确认添加
                </button>
                <button type="reset" class="btn btn-secondary btn-sm">
                  重置
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="./lib/form-serialize.js"></script>
  <script src="./lib/bootstrap/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/area.js"></script>
</body>

</html>